import React from 'react';
import {Form, Input, Button, Select, Table, Modal, Popover, Pagination, Message, Icon, DatePicker, Row, Col  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let List = React.createClass({

    getInitialState() {
        return {
            visible: false,
            data: [],
            forms: {},
            paramData: [],
            record: [],
            pagination: {
                current: 1,
                pageSize: 5
            },
            detailData:[],
        }
    },

    componentDidMount() {
       // this.handleSearch()
    },


    fetch(param){
        let _me = this;
        let page = this.state.pagination.current;
        let tenementContractId = this.state.record.tenementContractId;
        let params = Object.assign({}, {pageSize: 5, currentPage: page }, {tenementContractId: tenementContractId});
        Utils.sendAjax({
            url: '/user/bill/detail',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    _me.setState({
                        detailData: result.data,
                        pagination: result.page
                    })
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },
    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        let pager = this.state.pagination;
        pager.total = nextProps.pagination.total;
        this.setState({
            visible: nextProps.visible,
            record: nextProps.record,
            detailData: nextProps.detailData,
            pagination: pager,
            data: []
        })
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager,
        });
        this.fetch();
    },

    handleCancel() {
        this.props.callHide();
        this.handleReset();
        const pager = this.state.pagination;
        pager.current = 1;
        this.setState({
            data: [],
            pagination: pager
        })
    },

    handleSearch() {
        this.setState({
            pagination: {
                current: 1
            }
        })
        this.fetch();
    },

    handleReset() {
        this.setState({
            forms: {
                costTypeId : '',
                startTime: null,
                endTime: null,
            }
        });
    },

    rowKey(data) {
        console.log(data);
        return data.contractRentId;
    },

    render() {
        console.log('this.state.pagination',this.state.pagination);
        const { getFieldProps } = this.props.form;

        const columns = [
            {
                title: '账单期限（月）',
                dataIndex: 'rentPeriod'
            },{
                title: '应出账单金额（元）',
                dataIndex: 'collectAmount'
            },{
                title: '实际账单金额（元）',
                dataIndex: 'receivedAmount'
            },{
                title: '应付款日',
                dataIndex: 'rentTime'
            },{
                title: '实际付款日',
                dataIndex: 'payTime'
            },{
                title: '支付状态',
                dataIndex: 'status',
                render: (text, record) => {
                    let obj ={
                        '1': '已付款',
                        '-1': '未付款',
                    }
                    return (
                      <span>{obj[record.status]}</span>
                    );
                }
            },
        ];

        let record = this.state.record;
        let payWayObj = {
            '1': '固定',
            '-1': '不固定'
        }
        console.log('this.state.detailData',this.state.detailData);
        return (
            <Modal title="查看账单" visible={this.state.visible}
                   onOk={this.handleOk}  onCancel={this.handleCancel} width={900}
                   footer=""
            >
                <Form inline>
                    <Row gutter={16}>
                        <Col span={8}>
                            <FormItem label="房屋地址">
                                <span>{record.address}</span>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="房东姓名">
                                <span>{record.realName}</span>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="联系电话">
                                <span>{record.mobilePhone}</span>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={8}>
                            <FormItem label="付款方式">
                                <span>{payWayObj[record.paymentWay]}</span>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="付款周期">
                                <span>{record.rentPeriod} 个月</span>
                            </FormItem>
                        </Col>
                    </Row>

                </Form>
                <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.detailData }
                       onChange={this.handleTableChange}
                       pagination={this.state.pagination}/>
            </Modal>
        );
    }
});
List = Form.create()(List)
export default List